<template>
  <div class="hello">
    {{fullName}}
    <br>
    {{count}} <span style="color: red;font-size: 20px">{{flag}}</span>
    <br>
    <button @click="add({num:2, text:`加`})">+</button>
    <button @click="desc({num:1,text:`减`})">-</button>
    <br> <br>
    <button @click="asyncAdd({num:4})">asyncAdd</button>
  </div>
</template>

<script>

  // 仓库中的state getters 在组件上一般都会有个计算属性与之对应
  // 仓库中的mutation action 在组件上一般都会有个函数与之对应

  /*vuex:
    export function mapState(){}
    export function mapGetters(){}
    export function mapMutations(){}
    export function mapActions(){}
    export default {Store:()=>{}}*/

  import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
  export default {
    name: 'HelloWorld',
    computed:{
      ...mapState(["count"]),
      ...mapGetters(["flag","fullName"])
    },
    methods:{
      ...mapMutations(["add","desc"]),
      ...mapActions(["asyncAdd"])
    }
  }
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
